<template>
	<view class="container">
		<block v-if="isload">
			<view class="datalist">
				<view class="item">
					<view class="con previewImgContent">
						<view class="next-btn" @tap="doNext">
							<image src="../../static/img/next.png"></image>
						</view>
						<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
							v-if="detail.pics && !detail.video">
							<swiper-item v-for="(pic, idx) in detail.pics" :key="idx">
								<view class="swiper-item">
									<image :src="pic" mode="aspectFill" @tap="previewImage" :data-url="pic"
										:data-urls="detail.pics"></image>
								</view>
							</swiper-item>
						</swiper>
						<video class="video" id="video" :src="detail.video" v-if="detail.video" autoplay
							:show-center-play-btn="false"></video>
						<!-- <view class="f1"><text style="white-space:pre-wrap;">{{detail.content}}</text></view> -->
						<!-- 	<view class="f2" v-if="detail.pics">
					<image v-for="(pic, idx) in detail.pics" :key="idx" :src="pic" mode="widthFix" style="height:auto" @tap="previewImage" :data-url="pic" :data-urls="detail.pics"></image>
				</view> -->
					</view>


				</view>
				<view style="padding: 16rpx; background:#292929;margin: 12rpx 8rpx; border-radius: 20rpx;">
					<view class="userinfo_area">
						<image :src="detail.headimg" @tap="goto"
							:data-url="`/activity/luntan/user?user_id=` + detail.mid" class="f1"></image>
						<view class="f2">
							<!--<view class="covermy" :class="menuindex>-1?'tabbarbot':'notabbarbot'" @tap="goto"
							data-url="fatie">
							<image :src="pre_url+'/static/img/lt_fatie.png'"></image>-->
							<!--</view>-->
							<view class="t1" @tap="goto" :data-url="`/activity/luntan/user?user_id=` + detail.mid">
								{{detail.nickname}}
							</view>
							<view class="t2" @tap="goto" :data-url="`/activity/luntan/user?user_id=` + detail.mid">
								{{detail.showtime}}
							</view>
						</view>
						<view class="f3" v-if="detail.shop">
							<view class="do-shop" @click="goto"
								:data-url="'/pagesExt/business/index?id='+detail.shop.id">进店逛逛</view>
						</view>
					</view>
					<view class="f1" style="background-color: #333; margin-top: 2rpx; padding: 16rpx; color: #cccccc;"><text
							style="white-space:pre-wrap;">{{detail.content}}</text></view>
							
					<view class="f2" v-if="detail.cids_list" style="display: flex;    background-color: #333;margin-top: 1px;padding: 8px;color: #cccccc;">
						<view style="padding: 30rpx 10rpx 10rpx 0;" v-for="(items, indexs) in detail.cids_list" :key="indexs">
							{{items.name}}
						</view>
					</view>

					<view class="flex">
						<view class="flemr">
							<view class="zan flex-y-center" @tap="goto" data-url="fatie">
								<image :src="'/static/img/fabu.png'" class="fimg"></image>
								<text style="padding-left:1rpx; font-size: 26rpx">
									发布</text>
							</view>
							<view class="zan flex-y-center" @tap="followIng">
								<block v-if="!is_follow_user">
									<image :src="'/static/img/guanzhu.png'" class="fimg"></image>
									<text style="padding-left:1rpx; font-size: 26rpx">
										关注
									</text>
								</block>

								<block v-else>
									<image :src="'/static/img/guanzhu_active.png'" class="fimg"></image>
									<text style="padding-left:1rpx; font-size: 26rpx">
										已关注
									</text>
								</block>

							</view>
							<view class="zan flex-y-center" @tap="zan" :data-id="detail.id">
								<image :src="'/static/img/lt_like' + (iszan?'2':'') + '.png'" class="fimg"></image>
								<text style="padding-left:1rpx; font-size: 26rpx">{{detail.zan}}
								</text>
							</view>
							<view v-if="detail.mid == mid" class="zan flex-y-center" @tap="deltie" :data-id="detail.id">
								<image :src="'/static/img/shanchu.png'" class="fimg"></image>
								<text style="padding-left:1rpx; font-size: 26rpx">
									删除
								</text>
							</view>
							<view class="zan flex-y-center">
								<image :src="'/static/img/ydu.png'" class="fimg"></image>
								<text style="padding-left:1rpx; font-size: 26rpx">
									阅读 {{detail.readcount}}
								</text>
							</view>
							<view class="f1" v-if="need_call && detail.mobile" @tap.stop="callphone"
								:data-phone="detail.mobile"
								style="margin-left:60rpx;height: 30px;line-height: 30px;overflow: hidden;">
								<image src="/static/img/mobile.png"
									style="width: 30rpx;height: 30rpx;float: left;margin-top: 12rpx;"></image>
								<text style="margin-left: 10rpx;">拨打电话</text>
							</view>
						</view>

					</view>
				</view>

				<!-- 商户位置 -->
				<view class="shop-position flex" v-if="detail.shop">
					<view class="position-info">
						<text>位置：</text>
						<text class="address">{{detail.shop.address}}</text>
					</view>
					<view class="navigation-btn" @tap="openLocation" :data-latitude="detail.shop.latitude"
						:data-longitude="detail.shop.longitude" :data-company="detail.shop.name"
						:data-address="detail.shop.address">
						<text>导航到店</text>
					</view>
				</view>

				<!-- 商品信息 -->
				<view class="shop-product" v-if="detail.product && detail.product.length">
					<view class="section">
						<view class="title">
							<text>提到的好物</text>
						</view>
						<block v-for="(item, key) in detail.product" :key="key">
							<view class="product-main" @click="goto" :data-url="'/pages/shop/product?id='+item.id">
								<view class="image-area">
									<view class="image-block shop-image">
										<image :src="item.pic">

										</image>
									</view>
								</view>
								<view class="content-area">
									<view class="pro-title-area">
										<text class="text">{{item.name}}</text>
									</view>
									<view class="pro-price-area">
										<text style="font-size:24rpx;">￥</text>
										<text>{{item.sell_price}}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>

				<!-- 之前的按钮布局 -->
				<!-- 			<view class="flex">
					<view class="flemr">
						<view class="zan flex-y-center" @tap="goto" data-url="fatie">
							<image :src="'/static/img/fabu.png'" class="fimg"></image>
							<text style="padding-left:1rpx; font-size: 26rpx">
								发布11</text>
						</view>
						<view class="zan flex-y-center" @tap="followIng">
							<block v-if="!is_follow_user">
								<image :src="'/static/img/guanzhu.png'" class="fimg"></image>
								<text style="padding-left:1rpx; font-size: 26rpx">
									关注
								</text>
							</block>

							<block v-else>
								<image :src="'/static/img/guanzhu_active.png'" class="fimg"></image>
								<text style="padding-left:1rpx; font-size: 26rpx">
									已关注
								</text>
							</block>

						</view>
						<view class="zan flex-y-center" @tap="zan" :data-id="detail.id">
							<image :src="'/static/img/lt_like' + (iszan?'2':'') + '.png'" class="fimg"></image>
							<text style="padding-left:1rpx; font-size: 26rpx">{{detail.zan}}
							</text>
						</view>
						<view v-if="detail.mid == mid" class="zan flex-y-center" @tap="deltie" :data-id="detail.id">
							<image :src="'/static/img/shanchu.png'" class="fimg"></image>
							<text style="padding-left:1rpx; font-size: 26rpx">
								删除
							</text>
						</view>
						<view class="zan flex-y-center">
							<image :src="'/static/img/ydu.png'" class="fimg"></image>
							<text style="padding-left:1rpx; font-size: 26rpx">
								阅读 {{detail.readcount}}
							</text>
						</view>
						<view class="f1" v-if="need_call && detail.mobile" @tap.stop="callphone"
							:data-phone="detail.mobile"
							style="margin-left:60rpx;height: 30px;line-height: 30px;overflow: hidden;">
							<image src="/static/img/mobile.png"
								style="width: 30rpx;height: 30rpx;float: left;margin-top: 12rpx;"></image>
							<text style="margin-left: 10rpx;">拨打电话</text>
						</view>
					</view>

				</view> -->
				<!--评论-->
				<view class="plbox">
					<view class="plbox_title"><text class="t1">精彩评论</text><text>{{plcount}}</text>

						<view @click="showAllClick" class="plbox_subTitle"> {{showAllComment ? '收取评论':'查看评论'}}
						</view>
					</view>
					<view class="plbox_content" style="margin-top: 20rpx;" id="datalist" v-show="showAllComment">
						<block v-for="(item, idx) in datalist" :key="idx">
							<view class="item1 flex">
								<view class="f1 flex0">
									<image :src="item.headimg" @tap="goto"
										:data-url="`/activity/luntan/user?user_id=` + item.mid" class="f1"></image>
								</view>
								<view class="f2 flex-col">
									<text class="t1" @tap="goto"
										:data-url="`/activity/luntan/user?user_id=` + item.mid">{{item.nickname}}</text>
									<text class="t11" @tap="goto"
										:data-url="`/activity/luntan/user?user_id=` + item.mid">{{item.createtime}}</text>
									<view class="t2 plcontent">
										<parse :content="item.content" />
									</view>
									<block v-if="item.replylist.length>0">
										<view class="relist">
											<block v-for="(hfitem, index) in item.replylist" :key="index">
												<view class="item2">
													<view class="f1">{{hfitem.nickname}}<text
															class="t1">{{hfitem.createtime}}</text>
														<text v-if="hfitem.mid==mid" class="phuifu"
															style="font-size:16rpx;margin-left:20rpx;font-weight:normal"
															@tap="delplreply" :data-id="hfitem.id">删除</text>
													</view>
													<view class="f2 plcontent">
														<parse :content="hfitem.content" />
													</view>
												</view>
											</block>
										</view>
									</block>
									<view class="t3 flex">
										<view class="flex1">
											<text class="phuifu" style="cursor:pointer"
												@tap="hfid = item.id, type = 1, showInputToolbox(item.nickname)">回复</text>
											<text v-if="item.mid==mid" class="phuifu"
												style="cursor:pointer;margin-left:20rpx" @tap="delpinglun"
												:data-id="item.id">删除</text>
										</view>
										<view class="flex-y-center pzan" @tap="pzan" :data-id="item.id"
											:data-index="idx">
											<image :src="'/static/img/lt_like' + (item.iszan==1?'2':'') + '.png'">
											</image>
											{{item.zan}}
										</view>
										<!--<view class="zan flex-y-center" @tap="goto" :data-url="`/activity/luntan/user?user_id=` + item.mid">
										<image :src="'/static/img/guanzhu.png'" class="fimmg"></image><text style="padding-left:1rpx; font-size: 24rpx">
										关注</view>	-->
									</view>
								</view>
							</view>
						</block>
						
						<view v-if="datalist.length > 0 && showAllComment" @click="showAllClick"  class="plbox_hiddenTitle"> 收取评论
						</view>
						
					</view>
				</view>
				<view style="height:100rpx"></view>
				<view class="pinglun">
					<view class="pinput" @tap="show_mask = true,show_input_area = true , type = 0">发表评论</view>
					<view class="zan flex-y-center" @tap="zan" :data-id="detail.id">
						<image :src="'/static/img/lt_like' + (iszan?'2':'') + '.png'"></image>
						<text style="padding-left:2px">{{detail.zan}}</text>
					</view>
				</view>
				<view class="mask" @tap="show_mask = false,show_input_area = false ,content = ''" v-if="show_mask">
				</view>
				<view class="comment-input-area" v-if="show_input_area" :style="{'bottom': CommentStyle.Bottom}">
					<view class="comment-input-box">
						<textarea class="box-item" @focus="focusCommentTextArea" @blur="blurCommentTextArea"
							@keyboardheightchange="KeyboardHeightChangeCommentTextArea" v-model="content"
							:placeholder="comment_placeholder" :maxlength="-1" auto-height fixed
							:adjust-position="false"></textarea>
						<view class="box-item emoji" @click="toggleFace">
							<image src="/static/img/emote.png"></image>
						</view>
						<view class="box-item submit-btn">
							<button @tap="subpinglun" hover-class="btn-hover">评论</button>
						</view>
					</view>
					<view class="emoji-area" v-show="faceshow">
						<wxface @selectface="selectface"></wxface>
					</view>
				</view>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				pre_url: app.globalData.pre_url,
				isload: false,
				menuindex: -1,
				detail: {},
				datalist: [],
				pagenum: 1,
				id: 0,
				nomore: false,
				iszan: "",
				title: "",
				sharepic: "",
				mid: '',
				need_call: false,
				comment_placeholder: '你想说点什么......',
				show_mask: false,
				show_input_area: true,
				faceshow: false,
				content: '',
				CommentStyle: {
					Bottom: ''

				},
				hfid: '',
				type: 0,
				moreBox: '',
				is_follow_user: 0,
				nextData: null,
				showAllComment: false, //是否显示所有评论

			};
		},
		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.id = this.opt.id || 0;
			this.getdata();
		},
		onShareAppMessage: function() {
			return this._sharewx({
				title: this.detail.content,
				pic: this.detail.pics[0]
			});
		},
		onShareTimeline: function() {
			var sharewxdata = this._sharewx({
				title: this.detail.content,
				pic: this.detail.pics[0]
			});
			var query = (sharewxdata.path).split('?')[1];
			console.log(sharewxdata)
			console.log(query)
			return {
				title: sharewxdata.title,
				imageUrl: sharewxdata.imageUrl,
				query: query
			}
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
		methods: {
			showAllClick() {
				this.showAllComment = !this.showAllComment

				// 是否显示评论
			},
			getdata: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				app.post('ApiLuntan/detail', {
					pagenum: pagenum,
					id: that.id
				}, function(res) {
					
					that.loading = false;
					if (res.need_call) {
						that.need_call = true;
					}
					var data = res.datalist;
					that.nextData = res.next
					if (pagenum == 1) {
						that.mid = res.mid;
						that.datalist = res.datalist;
						that.plcount = res.plcount;
						that.iszan = res.iszan;
						that.detail = res.detail;
						that.myscore = res.myscore;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded({
							title: res.detail.content,
							pic: res.detail.pics[0]
						});
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;

						}
					}
					that.getFollowStatus()
				});
			},
			zan: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.post("ApiLuntan/zan", {
					id: id
				}, function(res) {
					if (res.type == 0) {
						//取消点赞
						var iszan = 0;
					} else {
						var iszan = 1;
					}
					that.iszan = iszan;
					that.detail.zan = res.zancount;
				});
			},
			pzan: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index;
				var datalist = that.datalist;
				app.post("ApiLuntan/pzan", {
					id: id
				}, function(res) {
					if (res.type == 0) {
						//取消点赞
						var iszan = 0;
					} else {
						var iszan = 1;
					}
					datalist[index].iszan = iszan;
					datalist[index].zan = res.zancount;
					that.datalist = datalist;
				});
			},
			showpinglun: function() {},
			deltie: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.confirm('确定要删除吗?', function() {
					app.post("ApiLuntan/deltie", {
						id: id
					}, function(res) {
						app.success(res.msg);
						setTimeout(function() {
							app.goback(true);
						}, 1000);
					});
				});
			},
			delpinglun: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.confirm('确定要删除吗?', function() {
					app.post("ApiLuntan/delpinglun", {
						id: id
					}, function(res) {
						app.success(res.msg);
						setTimeout(function() {
							that.getdata()
						}, 1000);
					});
				});
			},
			delplreply: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.id;
				app.confirm('确定要删除吗?', function() {
					app.post("ApiLuntan/delplreply", {
						id: id
					}, function(res) {
						app.success(res.msg);
						setTimeout(function() {
							that.getdata();
						}, 1000);
					});
				});
			},
			callphone: function(e) {
				var phone = e.currentTarget.dataset.phone;
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: function() {}
				});
			},
			showInputToolbox(name) {
				const that = this
				that.show_mask = true
				that.show_input_area = true
				console.log(this.hfid)
				if (name)
					this.comment_placeholder = `@${name}`

			},
			selectface: function(face) {
				var content = this.content + face;
				// this.faceshow = false;
				this.content = content;
			},

			openLocation: function(e) {
				//console.log(e)
				var latitude = parseFloat(e.currentTarget.dataset.latitude)
				var longitude = parseFloat(e.currentTarget.dataset.longitude)
				var address = e.currentTarget.dataset.address
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: address,
					scale: 13
				})
			},
			focusCommentTextArea(e) {
				this.faceshow = false

				this.CommentStyle.Bottom = e.detail.height + 'px'

			},

			blurCommentTextArea() {
				this.CommentStyle.Bottom = ''
			},

			KeyboardHeightChangeCommentTextArea(e) {
				//#ifdef MP-WEIXIN || APP-PLUS
				//#endif
				this.CommentStyle.Bottom = e.detail.height + 'px'
			},
			subpinglun: function() {
				var that = this;
				var id = this.detail.id;
				var type = that.type
				var hfid = that.hfid;
				var content = that.content;

				if (content == '') {
					app.error('请输入评论内容');
					return;
				}

				app.showLoading('提交中');
				app.post("ApiLuntan/subpinglun", {
					id: id,
					type: type,
					hfid: hfid,
					content: content
				}, function(res) {
					that.show_mask = false
					that.show_input_area = false
					that.content = ''
					app.showLoading(false);
					if (res.status == 1) {
						app.success(res.msg);
						setTimeout(function() {
							that.getdata()
						}, 1000);
					} else {
						app.error(res.msg);
					}
				});
			},

			toggleFace() {
				this.faceshow = !this.faceshow
			},

			followIng() {
				const that = this
				const follow_user_id = that.detail.mid
				app.get('ApiLuntan/followIng', {
					follow_user_id,
				}, (res) => {
					if (res.status) {
						that.is_follow_user = !that.is_follow_user
						that.getFollowStatus()
					}
				})
			},
			getFollowStatus() {
				const that = this
				app.get('ApiLuntan/getConfig', {
					user_id: that.detail.mid
				}, function(res) {
					if (res.data) {
						that.is_follow_user = res.data.is_follow_user
					}
				})
			},

			doNext() {
				const that = this
				if (!that.nextData) {
					app.error("更多精彩尽在首页")
					return false
				}
				uni.redirectTo({
					url: "/activity/luntan/detail?id=" + that.nextData.id
				})
			}

		}
	};
</script>
<style scoped>
	.datalist {
		width: 100%;
		/*padding: 10rpx;*/
		background: #020202
	}

	.datalist .item {
		width: 100%;
		display: flex;
		flex-direction: column;
		/*dding: 20rpx;*/
		/*ckground-color: rgb(253 253 253);*/
		border-radius: 20rpx;
	}

	.datalist .userinfo_area {
		width: 100%;
		display: flex;
		align-items: center;
		background: #333;
		margin-top: 4px;
		padding: 20rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.datalist .userinfo_area .f1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10%;
		margin-right: 16rpx
	}

	.datalist .userinfo_area .f2 .t1 {
		color: #e2e2e2;
		/*font-weight: bold;*/
		letter-spacing: 2rpx;
		font-size: 30rpx
	}

	.datalist .userinfo_area .f2 .t2 {
		color: #e2e2e2;
		font-size: 24rpx
	}

	.datalist .userinfo_area .f3 {
		margin-left: auto;
	}

	.datalist .userinfo_area .f3 .do-shop {
		padding: 12rpx 22rpx;
		font-size: 28rpx;
		background-color: #ff4d4f;
		color: #fff;
		border-radius: 10rpx;
		letter-spacing: 2rpx;
	}

	.datalist .item .con {
		width: 100%;
		padding: 0 0 24rpx 0;
		display: flex;
		flex-direction: column;
		letter-spacing: 1px;
		font-size: 15px;
		color: #7d7d7d;
		position: relative;
	}

	.datalist .item .con .next-btn {
		position: absolute;
		z-index: 99;
		right: 24rpx;
		bottom: 96rpx;
	}

	.datalist .item .con .next-btn image {
		width: 70rpx;
		height: 70rpx;
	}

	.datalist .item .swiper {
		height: 1060rpx;
		min-height: 464rpx;
		margin-bottom: 24rpx;
	}

	.datalist .item .swiper swiper-item {
		width: 100%;
		display: block;
		border-radius: 24rpx;
	}

	.datalist .item .swiper .swiper-item {
		width: 100%;
		height: inherit;
		display: block;
		padding: 10rpx;
		background: #000000;
		border-radius: 10rpx;
	}

	.datalist .item .swiper .swiper-item image {
		display: block;
		width: 100%;
		border-radius: 20rpx;
		position: relative;
		height: inherit;
		pointer-events: none;
	}

	.datalist .item .con .f2 {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap
	}

	.datalist .item .con .f2 image {
		width: 100%;
		margin-right: 2%;
		margin-bottom: 10rpx;
		border-radius: 8rpx
	}

	.datalist .item .con .video {
		width: 100%;
		height: 1280rpx;
		border-radius: 15rpx;
	}


	.datalist .shop-position {
		margin-top: 20rpx;
		color: #e2e2e2;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 16rpx;
		margin: 12rpx 8rpx;
		background: #292929;
		margin-top: 12rpx;
		border-radius: 10rpx;
	}

	.datalist .shop-position .position-info {

		line-height: 1;
		font-size: 26rpx;
	}

	.datalist .shop-position .position-info text {
		vertical-align: middle;
	}

	.datalist .shop-position .position-info .address {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-left: 8rpx;
		width: 420rpx;
		display: inline-block;
	}

	.datalist .shop-position .navigation-btn {
		color: #00bb87;
	}

	.datalist .shop-product {
		position: relative;
		padding: 16rpx 16rpx;
		background: #292929;
		margin-top: 20rpx;
		margin: 12rpx 8rpx;
		border-radius: 16rpx;
	}

	.datalist .shop-product .section .title {
		font-size: 28rpx;
		color: #e2e2e2;
	}


	.datalist .shop-product .section .product-main {
		margin-top: 20rpx;
		display: flex;
		background: #333;
		padding: 8px 8px;
		border-radius: 16rpx;
	}


	.datalist .shop-product .section .product-main .image-area {
		display: block;
		position: relative;
	}


	.datalist .shop-product .section .product-main .image-area .image-block {
		width: 120rpx;
		height: 120rpx;
		/* border-radius: 16rpx; */
	}

	.datalist .shop-product .section .product-main .image-area .image-block image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.datalist .shop-product .section .product-main .content-area {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
	}

	.datalist .shop-product .section .product-main .content-area .pro-title-area .text {
		color: #e2e2e2;
		font-size: 24rpx;
		text-align: left;
		white-space: revert;
		line-clamp: 2;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	.datalist .shop-product .section .product-main .content-area .pro-price-area {
		font-size: 28rpx;
		/* identical to box height */


		color: #FF5757;

	}

	.pinglun {
		width: 100%;
		max-width: 750px;
		margin: 0 auto;
		position: fixed;
		display: flex;
		align-items: center;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #292929;
		z-index: 995;
		border-top: 1px solid #656565;
		padding: 0 20rpx;
	}

	.pinglun .pinput {
		flex: 1;
		color: #a5adb5;
		font-size: 32rpx;
		padding: 0;
		line-height: 100rpx
	}

	.pinglun .zan {
		padding: 0 12rpx;
		line-height: 100rpx;
		color: #e2e2e2;
		font-size: 32rpx
	}

	.pinglun .zan image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx
	}

	.pinglun .buybtn {
		margin-left: 16rpx;
		background: #31C88E;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 20rpx;
		color: #fff;
		border-radius: 6rpx
	}

	.plbox {
		/*width: 100%;*/
		padding: 20rpx 20rpx;
		background: #292929;
		border-radius: 16rpx;
		margin: 12rpx 8rpx;
		margin-top: 1rpx
	}

	.plbox_title {
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* margin-bottom: 20rpx; */
		color: #e2e2e2;
		display: flex;
		box-sizing: border-box;
	}

	.plbox_subTitle {
		margin-left: auto;
		font-size: 24rpx;
		line-height: 60rpx;
		color: #e2e2e2;
	}
	.plbox_hiddenTitle{
		line-height: 60rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		color: #cccccc;
		text-align: center;
	}

	.plbox_title .t1 {
		margin-right: 16rpx;
		font-size: 24rpx;
		
	}

	.plbox_content .plcontent {
		vertical-align: middle;
		color: #111
	}

	.plbox_content .plcontent image {
		width: 44rpx;
		height: 44rpx;
		vertical-align: inherit;
	}

	.plbox_content .item1 {
		width: 100%;
		margin-bottom: 20rpx
	}

	.plbox_content .item1 .f1 {
		width: 80rpx;
	}

	.plbox_content .item1 .f1 image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%
	}

	.plbox_content .item1 .f2 {
		flex: 1
	}

	.plbox_content .item1 .f2 .t1 {
		color: #e2e2e2;
		font-weight: bold
	}

	.plbox_content .item1 .f2 .t11 {
		color: #999999;
		font-size: 20rpx
	}

	.plbox_content .item1 .f2 .t2 {
		color: #fff;
		margin: 10rpx 0;
		line-height: 60rpx;
	}

	.plbox_content .item1 .f2 .t3 {
		color: #fff;
		font-size: 30rpx
	}

	.plbox_content .item1 .f2 .pzan image {
		width: 35rpx;
		height: 35rpx;
		margin-right: 16rpx
	}

	.plbox_content .item1 .f2 .phuifu {
		color: #507DAF;
		font-size: 24rpx
	}

	.plbox_content .relist {
		width: 100%;
		background: #F6F5F8;
		padding: 4rpx 20rpx;
		margin-bottom: 20rpx
	}

	.plbox_content .relist .item2 {
		font-size: 24rpx;
		margin-bottom: 10rpx
	}

	.plbox_content .relist .item2 .f1 {
		font-weight: bold;
		color: #222;
		width: 100%
	}

	.plbox_content .relist .item2 .f1 .t1 {
		font-weight: normal;
		color: #999999;
		font-size: 20rpx;
		padding-left: 20rpx
	}

	.covermy {
		position: fixed;
		z-index: 99999;
		bottom: 50px;
		right: 1px;
		width: 100rpx;
		height: 100rpx;
		box-sizing: content-box
	}

	.covermy image {
		width: 100%;
		height: 100%
	}


	.mask {
		background-color: #0000004f;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;

	}

	.comment-input-area {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 9999999;
		background-color: #292929;
		padding: 15rpx 15rpx;
		/*border: 1px solid #f9f9f9;*/
		/*margin-left: -10rpx;*/
	}

	.comment-input-area .comment-input-box {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.comment-input-area .comment-input-box textarea {
		background-color: #292929;
		width: 100%;
		padding: 8px 8px;
		border-radius: 16rpx;
		/* #ifdef MP */
		min-height: 69rpx;
		align-self: center !important;
		/* #endif */
	}


	.comment-input-area .comment-input-box .box-item {
		align-self: flex-end;
		margin-right: 12rpx;
		z-index: 999999;
		color: #e8e8e8;
	}

	.comment-input-area .comment-input-box .emoji image {
		display: block;
		width: 64rpx;
		height: 64rpx;
	}

	.comment-input-area .comment-input-box .submit-btn {
		/* display: none; */
	}

	.comment-input-area .comment-input-box .submit-btn button {
		color: white;
		background-color: red;
		width: 100rpx;
		border-radius: 14rpx;
		font-weight: 600;
		font-size: 32rpx;
		line-height: 64rpx;
	}

	.comment-input-area .comment-input-box .submit-btn>.btn-hover {
		background-color: none;

	}

	.comment-input-area .comment-more-box {
		margin-top: 16rpx;
		margin-bottom: 16rpx;
		position: relative;
	}

	.comment-input-area .emoji-area {
		transition: all;
		transition-delay: .5s;
	}

	.comment-input-area .emoji-area>>>.wxface-dialog {
		width: 750rpx;
		position: relative !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		box-shadow: none !important;
		/* padding: 0 !important; */
		margin: 0 !important;
	}

	.comment-input-area .emoji-area>>>.wxface-dialog .wxface-face-item {
		width: 16% !important;
	}

	.comment-input-area .emoji-area>>>.wxface-dialog .wxface-face-image {
		width: 64rpx !important;
		height: 64rpx !important;
	}

	.flemr {
		padding: 20rpx 0rpx;
		background-color: #3a3a3a;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 100%;
		display: flex;
		color: #e2e2e2;
	}

	.fimg {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
		margin-left: 35rpx;
	}

	.fimmg {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
		margin-left: 35rpx;
	}
	/* .comment-input-area  .comment-more-box  .submit-btn{
			top: 0;
	
			    position: absolute;
			    right: 8rpx;
			    color: red;
		}
		 */
</style>
